<!doctype html>
<html lang="en">
  <head>
    ${require('./_head.html') 
      title="Forms" 
      description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports."
      canonical="forms.html"
    }
  </head>

  <body>
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
      ${require('./_sidebar.html') active="forms-link"}
      
      <div role="document">
        <section id="forms">
          <hgroup>
            <h1>Forms</h1>
            <h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
          </hgroup>
          <p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
          <p>All natives form elements are fully customizable and themeable with CSS variables.</p>
          <article aria-label="Form example">
            <form>
              <div class="grid">
                <label for="firstname">
                  First name
                  <input type="text" id="firstname" name="firstname" placeholder="First name" required>
                </label>
                <label for="lastname">
                  Last name
                  <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
                </label>
              </div>
              <label for="email">Email address</label>
              <input type="email" id="email" name="email" placeholder="Email address" required>
              <small>We'll never share your email with anyone else.</small>
              <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
            </form>
            <footer class="code">

<pre><code>&lt;<b>form</b>&gt;

  <em>&lt;!-- Grid --&gt;</em>
  &lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;

    <em>&lt;!-- Markup example 1: input is inside label --&gt;</em>
    &lt;<b>label</b> <i>for</i>=<u>"firstname"</u>&gt;
      First name
      &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>&gt;
    &lt;/<b>label</b>&gt;

    &lt;<b>label</b> <i>for</i>=<u>"lastname"</u>&gt;
      Last name
      &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"lastname"</u> <i>name</i>=<u>"lastname"</u> <i>placeholder</i>=<u>"Last name"</u> <i>required</i>&gt;
    &lt;/<b>label</b>&gt;

  &lt;/<b>div</b>&gt;

  <em>&lt;!-- Markup example 2: input is after label --&gt;</em>
  &lt;<b>label</b> <i>for</i>=<u>"email"</u>&gt;Email address&lt;/<b>label</b>&gt;
  &lt;<b>input</b> <i>type</i>=<u>"email"</u> <i>id</i>=<u>"email"</u> <i>name</i>=<u>"email"</u> <i>placeholder</i>=<u>"Email address"</u> <i>required</i>&gt;
  &lt;<b>small</b>&gt;We'll never share your email with anyone else.&lt;/<b>small</b>&gt;

  <em>&lt;!-- Button --&gt;</em>
  &lt;<b>button</b> <i>type</i>=<u>"submit"</u>&gt;Submit&lt;/<b>button</b>&gt;

&lt;/<b>form</b>&gt;</code></pre>

            </footer>
          </article>
          <p>Disabled and validation states:</p>
          <article aria-label="Validation states examples">
            <form class="grid">
              <input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false">
              <input type="text" placeholder="Invalid" aria-label="Invalid"  aria-invalid="true">
              <input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
              <input type="text" value="Readonly" aria-label="Readonly" readonly>
            </form>
            <footer class="code">

<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre>

            </footer>
          </article>
          <p><code>&lt;<b>fieldset</b>&gt;</code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
          <p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
          <article aria-label="Select, radios, checkboxes, switch examples">
            <label for="fruit">Fruit</label>
            <select id="fruit" required>
              <option value="" selected>Select a fruit…</option>
              <option>Banana</option>
              <option>Watermelon</option>
              <option>Apple</option>
              <option>Orange</option>
              <option>Mango</option>
            </select>
            <fieldset>
              <legend>Size</legend>
              <label for="small">
                <input type="radio" id="small" name="size" value="small" checked>
                Small
              </label>
              <label for="medium">
                <input type="radio" id="medium" name="size" value="medium">
                Medium
              </label>
              <label for="large">
                <input type="radio" id="large" name="size" value="large">
                Large
              </label>
              <label for="extralarge">
                <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
                Extra Large
              </label>
            </fieldset>
            <fieldset>
              <label for="terms">
                <input type="checkbox" id="terms" name="terms">
                I agree to the Terms and Conditions
              </label>
              <label for="terms_sharing">
                <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
                I agree to share my information with partners
              </label>
            </fieldset>
            <fieldset>
              <label for="switch">
                <input type="checkbox" id="switch" name="switch" role="switch">
                Publish on my profile
              </label>
              <label for="switch_disabled">
                <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
                Publish on my profile my accomplishments
              </label>
            </fieldset>
            <footer class="code">

<pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
&lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt;
  &lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit…&lt;/<b>option</b>&gt;
  &lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt;

<em>&lt;!-- Radios --&gt;</em>
&lt;<b>fieldset</b>&gt;
  &lt;<b>legend</b>&gt;Size&lt;/<b>legend</b>&gt;
  &lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
    &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u> <i>checked</i>&gt;
    Small
  &lt;/<b>label</b>&gt;
  &lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
    &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
    Medium
  &lt;/<b>label</b>&gt;
  &lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
    &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
    Large
  &lt;/<b>label</b>&gt;
  &lt;/<b>label</b>&gt;
  &lt;<b>label</b> <i>for</i>=<u>"extralarge"</u>&gt;
    &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>&gt;
    Extra Large
  &lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;

<em>&lt;!-- Checkboxes --&gt;</em>
&lt;<b>fieldset</b>&gt;
  &lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
    &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
    I agree to the Terms and Conditions
  &lt;/<b>label</b>&gt;
  &lt;<b>label</b> <i>for</i>=<u>"terms_sharing"</u>&gt;
    &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>&gt;
    I agree to share my information with partners
  &lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;

<em>&lt;!-- Switches --&gt;</em>
&lt;<b>fieldset</b>&gt;
  &lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
    &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
    Publish on my profile
  &lt;/<b>label</b>&gt;
  &lt;<b>label</b> <i>for</i>=<u>"switch_disabled"</u>&gt;
    &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>&gt;
    Publish on my profile my accomplishments
  &lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;</code></pre>

            </footer>
          </article>
          <p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
          <article aria-label="Indeterminate checkbox example">
            <label for="indeterminate-checkbox">
              <input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
              Select all
            </label>
            <script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
            <footer class="code">

<pre><code>&lt;<b>script</b>&gt;
  <i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre>

            </footer>
          </article>
          <p>Others input types:</p>
          <article aria-label="File browser, range slider, date, time, color examples">
            <label for="file">File browser
              <input type="file" id="file" name="file">
            </label>
            <label for="range">Range slider
              <input type="range" min="0" max="100" value="50" id="range" name="range">
            </label>
            <label for="date">Date
              <input type="date" id="date" name="date">
            </label>
            <label for="time">Time
              <input type="time" id="time" name="time">
            </label>
            <label for="color">Color
              <input type="color" id="color" name="color" value="#0eaaaa">
            </label>
            <footer class="code">

<pre><code><em>&lt;!-- File browser --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
  &lt;<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>&gt;
&lt;/<b>label</b>&gt;

<em>&lt;!-- Range slider --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"range"</u>&gt;Range slider
  &lt;<b>input</b> <i>type</i>=<u>"range"</u> <i>min</i>=<u>"0"</u> <i>max</i>=<u>"100"</u> <i>value</i>=<u>"50"</u> <i>id</i>=<u>"range"</u> <i>name</i>=<u>"range"</u>&gt;
&lt;/<b>label</b>&gt;

<em>&lt;!-- Date --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"date"</u>&gt;Date
  &lt;<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u>&gt;
&lt;/<b>label</b>&gt;

<em>&lt;!-- Time --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"time"</u>&gt;Time
  &lt;<b>input</b> <i>type</i>=<u>"time"</u> <i>id</i>=<u>"time"</u> <i>name</i>=<u>"time"</u>&gt;
&lt;/<b>label</b>&gt;

<em>&lt;!-- Color --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"color"</u>&gt;Color
  &lt;<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
&lt;/<b>label</b>&gt;</code></pre>

            </footer>
          </article>
        </section>

        ${require('./_footer.html')}
        
      </div>
    </main>
    <script src="js/commons.min.js"></script>
  </body>
</html>
